<template>
  <div class="main-wrapper">
    <div class="task-log">
      <p class="task-id-title">任务ID: 
        <span style="font-weight: bold;">{{ task_id }}</span>
      </p>
      <div class="log-box">
        <div class="log-left">
          <p class="log-title">日志列表</p>
          <ul>
            <li :class="[{ 'active': curLogName === item }, 'log-li']" v-for="(item, index) in logList" :key="index" @click="viewLog(item)">
                <p>{{ item }}</p>
            </li>
            <li class="empty-data" v-if="logList.length === 0"> 暂无数据 </li>
          </ul>
        </div>
        <div class="log-right">
          <p class="log-title">日志详情</p>
          <div class="log-content" v-html="content"></div>
          <div class="empty-data" v-if="content.length === 0"> 暂无数据 </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getTaskLogsList, viewTaskLog } from '@/api/report'
export default {
  name: 'TaskLog',
  data() {
    return {
      task_id: '',
      logList: [],
      curLogName: '',
      content: '',
      firstTxtLog: '',
    }
  },
  created() {
    this.task_id = this.$route.params.taskId
    this.getLogList()
  },
  methods: {
    getLogList() {
      getTaskLogsList({ task_id: this.task_id }).then(res => {
        if(res && res.log_names){
          this.logList = res.log_names.map((item) => {
            return item.log_name
          })
          // 第一个后缀为txt的log_name项,获取内容，右侧展示
          this.firstTxtLog = this.logList.find(item => item.indexOf('.txt') > -1)
          this.viewLog(this.firstTxtLog)
        }
      })
    },
    viewLog(log_name) {
      this.curLogName = log_name
      const params = {
        task_id: this.task_id,
        log_name: log_name,
      }
      viewTaskLog(params).then(res => {
        if (res.log_url.length !== 0) {
          window.open(res.log_url, '_blank')
        } else {
          const regex = /(- WARNING -|- ERROR -|\n)/gi;
          const replacedText = res.log_content.replace(regex, function(match) {
          if (match === "- WARNING -") {
          return "<span style='color: orange'>- WARNING -</span>";
          } else if (match === "- ERROR -") {
          return "<span style='color:red'>- ERROR -</span>";
          }else if (match === "\n") {
          return "<br />";
          }
          });
          this.content = replacedText
        }
      })
    },
  }
}
</script>
<style lang="scss">
@import '@/styles/vars.scss';
@import '@/styles/mixin.scss';

.task-log {
  padding: 20px 20px 0;
  .task-id-title{
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(242, 243, 248);
    font-size: 16px;
    color: #3d3d3d;
  }
  // 共用样式
  .title {
    color: $primary-color;
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 15px;
    padding-left:10px;
  }

  .log-title {
    color: #293b5a;
    font-weight: 600;
    padding: 6px 0px;
    font-size: 14px;
    line-height: 1.8;
    padding-top: 10px;
    border-bottom: 1px solid rgb(242, 243, 248);
  }
  .empty-data{
    line-height: 2.2;
    text-align: center;
    margin: 20px;
    color: #909399;
  }
  // 共用样式 end
  .log-box {
    display: flex;
    justify-content: space-around;
    height: calc(100vh - 140px);
    .log-left {
      width: 18%;
      min-width: 230px;
      border-right: 1px solid rgb(242, 243, 248);
      >ul{
        height: calc(100vh - 180px);
        overflow: auto;
      }
      .log-li {
        padding: 6px 0px;
        font-size: 14px;
        line-height: 1.8;

        >P {
          @include text-ellipsis;
        }

        &:hover {
          cursor: pointer;
        }
        &.active {
          color: $primary-color;
          font-weight: bold;
          cursor: pointer;
        }

      }

    }

    .log-right {
      width: 80%;
      padding-left: 20px;
      .log-content{
        line-height: 1.8;
        height: calc(100vh - 180px);
        overflow: auto;
        padding: 15px 0;
      }
    }
  }
}</style>